<template>
  <van-cell
    :title="title"
    :label="description"
    :border="border"
    class="default-cell"
  >
    <scale-image
      :src="path"
      :ratio="1.618"
      radius="3px"
      :icon="mediaFormatIcon"
      iconSize="large"
      v-if="thumb"
    />
  </van-cell>
</template>

<script>
import ScaleImage from '@/components/scaleImage'
export default {
  components: {
    ScaleImage
  },
  name: 'default',
  props: {
    data: {
      type: Object
    },
    title: {
      type: String,
      default: ''
    },
    thumb: Object,
    description: {
      type: String,
      default: ''
    },
    border: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    path () {
      if (this.thumb) {
        return this.thumb.path
      }
      return ''
    },
    mediaFormatIcon () {
      if (this.thumb && this.thumb.format === 'video') {
        return '/static/icons/video.png'
      }
      return ''
    }
  }
}
</script>

<style lang="less" scoped>
.default-cell {
  /deep/ .van-cell {
    &__title {
      flex: 2;
      -webkit-flex: 2;
      font-size: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 70px;
    }
    &__label {
      font-size: 10px;
      color: rgba(0, 0, 0, 0.5);
      line-height: initial;
    }
    &__value {
      text-align: left;
      padding-left: 5px;
    }
  }
}
</style>
